<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>填写与核对订单</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/order.ordersubmit.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body style="position: static">
    <div id="app" class="bgGray">
        <div data-v-95ac8d30="" class="header3">
            <div data-v-95ac8d30="" class="layout clear">
                <div data-v-95ac8d30="" class="left logo">
                    <a data-v-95ac8d30="" href="index.html">
                        <img data-v-95ac8d30=""
                             src="">
                    </a>
                </div>
                <div data-v-95ac8d30="" class="header3Nav right">
                    <a data-v-95ac8d30="" href="/pagehome/loginsuccess.html">首页</a>
                    |<a data-v-95ac8d30="" href="../mymain/mymain.html">我的订单</a>
                    |<a data-v-95ac8d30="" href="helpCenter.html">帮助中心</a>
                    |<a data-v-95ac8d30="" href="/pagehome/index.html" onclick="exitLogin()" id="exitLogin">退出</a>
                </div>
                <div data-v-95ac8d30="" class="header3User right">
                    <i data-v-95ac8d30="" class="iconfont icon-phone"></i>
                    <span data-v-95ac8d30="" class="sp1" id="telSpan">400-919-8000</span>
                    <span data-v-95ac8d30="" class="sp2">欢迎您，</span>
                    <span data-v-95ac8d30="" class="sp3" id="userName"></span>
                </div>
            </div>
        </div>

        <div class="checkOrderTit">
            <div class="layout">
                <div class="checkOrderTitCom">
                    <div class="checkOrderTitComT">
                        <div class="td1 bgRed"></div>
                        <div class="td2 bgRed">1</div>
                        <div class="td3 bgRed"></div>
                        <div class="td2 bgRed">2</div>
                        <div class="td3 bgGray1" id="finally1"></div>
                        <div class="td2 bgGray1" id="finally">3</div>
                        <div class="td1 bgGray1" id="finally2"></div>
                    </div>
                    <div class="checkOrderTitComB">
                        <div class="bd1 colorRed">选择车辆</div>
                        <div class="bd2 colorRed">填写和核对订单</div>
                        <div class="bd1 colorGray">提交成功</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="orderMsg clear" id="carOrder">

            <div class="orderMsgs">
                <div class="orderMsgL left" id="carImg">
<!--                    <img src="infos.picture" >-->
<!--                    <p id="typeSitnum">{{infos.type}}|{{infos.sitnum}}座</p>-->
                </div>
                <div class="orderMsgR left">
                    <div class="carTitle">
                        <span class="carTitle1 left" id="name">{{infos.name}}</span>
                    </div>

                    <div class="selCarMsg">
                        <div class="selCarMsgCom">
                            <div class="MsgTit">取车</div>
                            <div class="Msg" id="bmsel">取车地址：{{getcitys.name}}</div>
                        </div>

                        <div class="selCarMsgCom">
                            <div class="MsgTit">还车</div>
                            <div class="Msg" id="hcs">还车地址：{{backcitys.name}}</div>
                        </div>
                    </div>
                </div>
                <div class="costCom right">
                    <h3>费用明细</h3>
                    <div class="item">
                        <span class="left">基本租金</span>
                        <span class="right" id="price">{{infos.price}}元</span>
                    </div>
                    <div class="item">
                        <span class="left">手续费（35元/单）</span>
                        <span class="right">35元</span>
                    </div>
                    <div class="item">
                        <span class="left">基本保障服务</span>
                        <span class="right">50元</span>
                    </div>
                    <div class="payMony">
                        <label class="right">应付金额&nbsp;
                            <span id="total">{{current()}}</span></label>
                    </div>

                    <button class="buttons right" id="butt" onclick="submitorder()">
                        提交订单
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>

        var storage = window.sessionStorage;
        var user = JSON.parse(storage.getItem('user'));
        var car = JSON.parse(storage.getItem('car'));

        layui.use(['jquery', 'table', 'layer', 'form'], function () {
            // 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
            var $ = layui.$;
            var layer = layui.layer;

            if (user != null) {
                $("#userName").text(user.name);
                $("#telSpan").text(user.tel);
                $("#loginLobel").hide();
            } else {
                $("#successLobel").hide();
            }

            $("#name").text(car.name);
            $("#typeSitnum").text(car.type + "|" + car.sitnum + "座");
            $("#price").text(car.price);
            $("#total").text(car.price + 85);
            $("#carImg").append("<img src=\""+ car.picture +"\">")
            $("#carImg").append("<p id=\"typeSitnum\">" + car.type + "|" + car.sitnum + "座" + "</p>")

            //获取取车换车城市信息
            $.ajax({
                url: "/getCityById/" + storage.getItem('bmsel'),
                type: "GET",
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    $("#bmsel").text("取车地址：" + data.name);
                },
                error: function() {
                    console.log("ajax error");
                }
            });

            $.ajax({
                url: "/getCityById/" +  storage.getItem('hcs'),
                type: "GET",
                contentType: 'application/json',
                dataType: 'json',
                success: function(data) {
                    $("#hcs").text("还车地址：" + data.name);
                },
                error: function() {
                    console.log("ajax error");
                }
            });

        });

        function exitLogin(){
            window.sessionStorage.setItem('user', null);
        }

        function submitorder(){
            console.log(user);
            if (user == null){
                window.location.href = "/pagehome/login.html";
            }else {
                $("#finally1").attr("class", "td3 bgRed");
                $("#finally").attr("class", "td2 bgRed");
                $("#finally2").attr("class", "td1 bgRed");

                var orderJson = '{"cid":' + car.id + ', "uid":' + user.uid + ', "getid":' + storage.getItem('bmsel')
                    + ', "backid":' + storage.getItem('hcs') + ', "oprice":' + $("#total").text() + ', "status":"已预定"}';

                console.log(orderJson);

                $.ajax({
                    url: "/saveOrder",
                    type: "POST",
                    data: orderJson,
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function(data) {
                        if (data){
                            layui.layer.msg("预定成功");
                            window.location.href = "/mymain/mymain.html";
                        }else {
                            layui.layer.msg("预定失败");
                        }
                    },
                    error: function() {
                        console.log("ajax error");
                    }
                });
            }

        }

    </script>
</body>
</html>